<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="SPU名称">
        <el-input placeholder="SPU名称" v-model="spuForm.spuName"></el-input>
      </el-form-item>
      <el-form-item label="品牌">
        <el-select placeholder="请选择" v-model="spuForm.tmId">
          <el-option
            :value="tm.id"
            v-for="tm in trademarkList"
            :key="tm.id"
            :label="tm.tmName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述">
        <el-input
          type="textarea"
          placeholder="SPU描述"
          rows="4"
          v-model="spuForm.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="SPU图片">
        <!-- 上传图片
        action 上传图片地址
        list-type 文件列表类型
        on-preview 图片预览时触发
        on-remove 删除图片时触发
        on-success 图片上传成功后触发 -->
        <el-upload
          :action="`${baseUrl}/admin/product/upload`"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :file-list="spuImageList"
        >
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select
          :placeholder="`还有${unSelectedSaleAttrList.length}个未选择`"
          v-model="saleAttrIdAndName"
        >
          <el-option
            :value="`${unSelect.id}:${unSelect.name}`"
            v-for="unSelect in unSelectedSaleAttrList"
            :key="unSelect.id"
            :label="unSelect.name"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          @click="addSaleAttr"
          :disabled="!saleAttrIdAndName"
          >添加销售属性</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-table border :data="spuSaleAttrList">
          <el-table-column
            label="序号"
            width="80"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            label="属性名"
            width="150"
            prop="saleAttrName"
          ></el-table-column>
          <el-table-column label="属性值名称列表">
            <template v-slot="{ row, $index }">
              <el-tag
                closable
                type="success"
                v-for="(saleAttrValue, index) in row.spuSaleAttrValueList"
                :key="saleAttrValue.id"
                @close="row.spuSaleAttrValueList.splice(index, 1)"
                style="margin-right: 3px"
              >
                {{ saleAttrValue.saleAttrValueName }}
              </el-tag>
              <!-- 这里的row是销售属性 每个销售属性有对应的编辑模式和查看模式 isEdit加在row身上 -->
              <el-input
                size="mini"
                @blur="toLook(row)"
                @keyup.enter.native="toLook(row)"
                v-if="row.isEdit"
                ref="InputRef"
                v-model="row.inputValue"
              ></el-input>
              <el-button
                size="mini"
                icon="el-icon-plus"
                v-else
                @click="toEdit(row)"
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template v-slot="{ row, $index }">
              <el-button
                icon="el-icon-delete"
                type="danger"
                size="mini"
                title="删除销售属性"
                @click="spuSaleAttrList.splice($index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          size="small"
          @click="save"
          :disabled="!spuSaleAttrList.length"
          >保存</el-button
        >
        <el-button size="small" @click="cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from "vuex";
import spuApi from "@/api/spu";
import skuApi from "@/api/sku";
import trademarkApi from "@/api/trademark";

export default {
  name: "SpuForm",
  props: ["spu"],
  data() {
    return {
      spuForm: this.spu, //要收集的数据
      baseSaleAttrList: [], //基础销售属性列表
      trademarkList: [], //品牌列表
      spuImageList: [],
      spuSaleAttrList: [],
      dialogImageUrl: "", //图片预览的图片地址
      dialogVisible: false, //控制图片预览的大图是否显示
      saleAttrIdAndName: "", //要收集的销售属性的id和名字
      baseUrl: process.env.VUE_APP_BASE_API, //引入环境变量
    };
  },
  methods: {
    // 添加初始化数据
    async getAddInitData() {
      try {
        const res1 = await spuApi.getBaseSaleAttrList();
        this.baseSaleAttrList = res1.data;
        const res2 = await trademarkApi.getTrademarkList();

        this.trademarkList = res2.data;
      } catch (error) {
        Message({
          type: "error",
          message: "获取添加初始数据失败",
        });
      }
    },
    // 修改初始化数据
    async getUpdateData() {
      const p1 = spuApi.getBaseSaleAttrList();
      const p2 = trademarkApi.getTrademarkList();
      const p3 = skuApi.getSpuImageList(this.spuForm.id);
      const p4 = skuApi.getSpuSaleAttrList(this.spuForm.id);
      try {
        const res = await Promise.all([p1, p2, p3, p4]);
        this.baseSaleAttrList = res[0].data;
        this.trademarkList = res[1].data;
        // 上传的图片需要添加两个属性才会显示出来  需要整理
        // 照片墙显示的那个数组里面每一个图片对象 必须要又name和url  才可以正常展示图片
        this.spuImageList = res[2].data.map((item) => {
          //注意响应式添加属性
          return { ...item, name: item.imgName, url: item.imgUrl };
        });

        this.spuSaleAttrList = res[3].data;
      } catch (error) {
        this.$message({
          message: "获取修改初始数据失败",
          type: "error",
        });
      }
    },
    // 点击添加销售属性按钮
    addSaleAttr() {
      let [baseSaleAttrId, saleAttrName] = this.saleAttrIdAndName.split(":");
      let obj = {
        baseSaleAttrId,
        saleAttrName,
        spuSaleAttrValueList: [],
      };
      this.spuSaleAttrList.push(obj);
      // 清空收集的saleAttrIdAndName这个数据
      this.saleAttrIdAndName = "";
    },
    // 点击按钮进入编辑模式
    toEdit(row) {
      // 添加isEdit属性控制显示与隐藏  在模板中使用  用到响应式数据
      this.$set(row, "isEdit", true);
      // 同理input的值inputValue也需要添加成响应式数据，才能进行收集
      this.$set(row, "inputValue", "");
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.InputRef.focus();
      });
    },
    // 输入框失去焦点或者回车进入查看模式
    toLook(row) {
      // 获取用户输入的销售属性值的内容
      let inputValue = row.inputValue;
      if (!inputValue?.trim()) {
        // 清空输入的内容 变为查看模式
        row.inputValue = "";
        row.isEdit = false;
        return;
      }
      const flag = row.spuSaleAttrValueList.some((item) => {
        // 如果为true  则存在重复项
        return item.saleAttrValueName === inputValue;
      });
      if (flag) {
        // 变为查看模式
        row.isEdit = false;
        // 清空输入框的内容
        row.inputValue = "";
        this.$message({
          message: "不能输入重复项",
          type: "error",
        });
        return;
      }
      let obj = {
        baseSaleAttrId: row.baseSaleAttrId,
        saleAttrValueName: inputValue,
      };
      row.spuSaleAttrValueList.push(obj);
      row.inputValue = "";
      row.isEdit = false;
    },
    // 点击保存的逻辑
    async save() {
      // 1.获取数据
      let spuParams = this.spuForm;
      // 2.整理数据  删除新增的属性
      spuParams.category3Id = this.category3Id;

      spuParams.spuImageList = this.spuImageList.map((item) => {
        return {
          //新的和旧的图片都有name
          imgName: item.name,
          // 旧的图片路径是item.imgUrl  新的图片路径item.response.data
          imgUrl: item.imgUrl || item.response.data,
        };
      });

      spuParams.spuSaleAttrList = this.spuSaleAttrList.map((item) => {
        this.$delete(item, "isEdit");
        this.$delete(item, "inputValue");
        return item;
      });

      // 3.携带最新参数发送请求
      try {
        await spuApi.saveSpuInfo(spuParams);
        // 4.请求成功 提示 回列表页
        this.$message({
          type: "success",
          message: `${this.spuForm.id ? "修改" : "添加"}成功`,
        });
        // 如果是添加 则请求第一页 如果是修改则请求当前页
        // spuList来到咱们的spuForm时 需要把当前页码传递进来
        // 传递一份最新的当前页码回到spuList 让他请求时使用

        // Object.assign可以合并对象，
        // this._data：可以操作data中的响应式数据
        // this.$option可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空
        // Object.assign(this._data, this.$options.data());
      } catch (error) {
        // 5.请求失败
        this.$message({
          type: "error",
          message: `${this.spuForm.id ? "修改" : "添加"}失败`,
        });
      }
      this.$emit("setShowState", 1);
    },
    // upload标签删除图片的回调
    handleRemove(file, fileList) {
      //  file删除的图片地址  fileList剩下的图片信息
      this.spuImageList = fileList;
    },
    // upload标签查看图片的回调
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传成功的回调
    handleSuccess(response, file, fileList) {
      // response成功的响应信息
      // file上传的图片信息
      // fileList 上传图片成功之后的图片列表数据
      this.spuImageList = fileList;
    },
    // 取消
    cancle() {
      this.$emit("setShowState", 1);
    },

    // 收集数据spuForm
  },
  computed: {
    ...mapState("category", ["category3Id"]),
    // 计算未选择的销售属性列表
    unSelectedSaleAttrList() {
      // 从所有的销售属性列表中 过滤不在spu自己的销售属性列表的每一项
      // 用总的基础销售属性列表里的每一项 去跟 当前spu的销售属性列表去比较
      // 名字不相同的需要
      return this.baseSaleAttrList.filter((item) => {
        return this.spuSaleAttrList.every((item1) => {
          return item1.saleAttrName !== item.name;
        });
      });
    },
  },
  mounted() {
    // 添加发送两个请求
    if (!this.spuForm.id) {
      this.getAddInitData();
    }
    // 修改发送四个请求
    else {
      this.getUpdateData();
    }
  },
};
</script>

<style lang="scss" scoped></style>
